<%-- 
    Document   : listings
    Created on : Apr 2, 2013, 7:24:28 PM
    Author     : ECH
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Listings</title>
        
        <link rel="stylesheet" href="css/dbpedia/style.css" type="text/css" />
        <link rel="stylesheet" href="css/dbpedia/highlighter.css" type="text/css" />
        
        <style>
              .view-tile-float-wrap {
                /* 816 = <number of floats> * (<float width> + 2 * <float border width>) */
                width:1000px;
                border:0px solid;
                /* causes .float-wrap's height to match its child divs */
                overflow:auto;
              }
              .view-tile-left-floater {
                width:210px;
                border:0px solid;    
                float:left;
                margin-left: 20px;
                margin-top: 20px;
                background-color:#F5F2F3;
              }
              .view-tile-outer {
                overflow-x: auto;   
              }
              
              .view-list-float-wrap {
                /* 816 = <number of floats> * (<float width> + 2 * <float border width>) */
                width:1000px;
                border:0px solid;
                /* causes .float-wrap's height to match its child divs */
                overflow:auto;
              }
              .view-list-left-floater {
                width:210px;
                border:0px solid;    
                float:left;
                margin-left: 20px;
                margin-top: 20px;
                background-color:#F5F2F3;
              }
              .view-list-outer {
                overflow-x: auto;   
              }
        </style>
        
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>        
        <script type="text/javascript" src="js/jquery/jquery-1.8.3.min.js"></script>
        
        <%@ include file="include/listingMaps.jsp" %>
        
        <script type="text/javascript">
            function load() {
                $.each($("input[name='placeID']"), function() {
                    $("#place-"+$(this).val()).prop( "checked", true );
                });
                $.each($("input[name='propertyTypeID']"), function() {
                    $("#propertyType-"+$(this).val()).prop( "checked", true );
                });
                $.each($("input[name='statusTypeID']"), function() {
                    $("#statusType-"+$(this).val()).prop( "checked", true );
                });
            }
            
            function check() {
                var selectedTypes = new Array();
                var selectedPlaces = new Array();
                var selectedStatus = new Array();
                var selectedAmenities = new Array();
                
                $.each($("input[name='typecbx']:checked"), function() {
                    selectedTypes.push($(this).val());
                });
                $.each($("input[name='placecbx']:checked"), function() {
                    selectedPlaces.push($(this).val());
                });
                $.each($("input[name='statuscbx']:checked"), function() {
                    selectedStatus.push($(this).val());
                });
                $.each($("input[name='amenitycbx']:checked"), function() {
                    selectedAmenities.push($(this).val());
                });
                
                search(selectedTypes, selectedPlaces, selectedStatus, selectedAmenities);
            }
            
            function search(selectedTypes, selectedPlaces, selectedStatus, selectedAmenities) {
                try {
                    $.ajax({
                        type: 'POST',
                        url: "ws/search.htm",
                        data: {
                            propertyTypeIDs: "["+selectedTypes+"]",
                            placeIDs: "["+selectedPlaces+"]",
                            statusTypeIDs: "["+selectedStatus+"]",
                            amenityIDs: "["+selectedAmenities+"]",
                            ham: "ham"
                        },
                        timeout : 200000,
                        success: function(data) {
                            try {
                                var listings = data.model.listings
                                
                                //CX: reflect tile view
                                $("#view-tile-float-wrap").empty();  
                                for (var i = 0; i < listings.length; i++) {
                                    var listing = listings[i];
                                    var prmaryPhoto="";
                                    if (listing.primaryPhoto) {
                                        prmaryPhoto = listing.primaryPhoto.filename;
                                    }
                                    $("#view-tile-float-wrap")
                                            .append("<div class=\"view-tile-left-floater\">\n\
                                                        <a href=\"listing.htm?a=2&id="+listing.id+"\">\n\
                                                            <img src=\"../uploads/img/"+prmaryPhoto+"\" alt=\"\" style=\"height:130px; width:210px\"></img>\n\
                                                        </a>\n\
                                                        <br>\n\
                                                            <table border=\"0\" style=\"width: 210px; padding-top:0px;\">\n\
                                                                <tr>\n\
                                                                    <td><span style=\"font-size: 12px; font-family: verdana\">"+listing.title+"<br><br></span></td>\n\
                                                                </tr>\n\
                                                                <tr>\n\
                                                                    <td><span style=\"font-size: 13px; font-weight: bold;\">"+listing.sqArea+"</span><span style=\"font-size: 12px;\"> sqm.</span></td>\n\
                                                                    <td align=\"right\"><span style=\"font-size: 13px; font-weight: bold;\">&#8369;"+listing.monthRate+"</span><span style=\"font-size: 12px;\"> /mo.</span></td>\n\
                                                                </tr>\n\
                                                            </table>\n\
                                                        </div>");
                                }                      
                                
                                //CX: reflect list view                                                 
                                $("#view-list-outer").empty();  
                                for (var i = 0; i < listings.length; i++) {
                                    var listing = listings[i];                                    
                                    var prmaryPhoto="";
                                    if (listing.primaryPhoto) {
                                        prmaryPhoto = listing.primaryPhoto.filename;
                                    }
                                    $("#view-list-outer")
                                            .append("<div style=\"background-color:#F5F2F3; width: 800px; margin-top: 10px; margin-left:10px;\">\n\
                                                                    <table>\n\
                                                                        <tr>\n\
                                                                            <td>\n\
                                                                                <a href=\"listing.htm?a=2&id="+listing.id+"\">\n\
                                                                                    <img src=\"../uploads/img/"+prmaryPhoto+"\" alt=\"\" style=\"height:90px; width:160px\"></img>\n\
                                                                                </a>\n\
                                                                            </td>\n\
                                                                            <td style=\"vertical-align: top;\">\n\
                                                                                <table border=\"0\" style=\"width: 600px; padding-top:0px; margin-left: 5px;\">\n\
                                                                                    <tr>\n\
                                                                                        <td>\n\
                                                                                            <span style=\"font-size: 18px; font-family: verdana; padding-bottom: 10px\">"+listing.title+"</span>\n\
                                                                                        <div style=\"padding-top:5px; padding-bottom:0px;\"><span style=\"font-size: 12px; font-weight: normal;\">"+listing.address+"</span></div>\n\
                                                                                        </td>\n\
                                                                                        <td align=\"right\"><span style=\"font-size: 25px; font-weight: normal;\">&#8369;"+listing.monthRate+"</span><span style=\"font-size: 12px;\"> /Mo.</span></td>\n\
                                                                                    </tr>\n\
                                                                                    <tr>\n\
                                                                                        <td>\n\
                                                                                        </td>\n\
                                                                                        <td align=\"right\">\n\
                                                                                            <span style=\"font-size: 16px; font-weight: bold;\">"+listing.sqArea+"</span>\n\
                                                                                            <span style=\"font-size: 12px;\"> Sqm.</span>\n\
                                                                                        </td>\n\
                                                                                    </tr>\n\
                                                                                </table>\n\
                                                                            </td>\n\
                                                                        </tr>\n\
                                                                    </table>\n\
                                                                 </div>");
                                }
                                
                                //CX: reflect map view
                                clearMapViewMarkers();                             
                                for (var i = 0; i < listings.length; i++) {
                                    var listing = listings[i];
                                    var id = listing.id;
                                    var title = listing.title;
                                    var desc = listing.description;
                                    var address = listing.address;
                                    var lat = listing.lat;
                                    var lng = listing.lng;
                                    putNumberedMarker(i+1, id, title, desc, address, lat, lng);
                                }                                
                            } 
                            catch (e) {
                                alert(e);
                            }
                        },
                        error : function(xhr, textStatus, errorThrown) {
                            alert('Error: ' + errorThrown);
                        }
                    });
                } catch (e) {
                    alert(e);
                }                 
            }
            
            function switchView(view) {
                if (view == 1) {
                    $("#view-tiles").css("display", "block");
                    $("#view-list").css("display", "none");
                    $("#view-map").css("display", "none");
                    
                    $("#map_canvas").css("display", "block");
                }
                else if (view == 2) {
                    $("#view-tiles").css("display", "none");
                    $("#view-list").css("display", "block");
                    $("#view-map").css("display", "none");
                    
                    $("#map_canvas").css("display", "block");
                }
                else if (view == 3) {
                    $("#view-tiles").css("display", "none");
                    $("#view-list").css("display", "none");
                    $("#view-map").css("display", "block");
                    initMapView();
                    check();
                    $("#map_canvas").css("display", "none");
                }
            }
        </script>
    </head>
    <body onload="initMapView();load();">

        <%@include file="header.jsp" %>
        <br><br>
        
        <table border="0" style="max-width: 1000px; position: relative; top: -30px">
            <tr>
                <td></td>
                <td>
                    <div style="margin-left:650px">
                        <input type="button" value=" tiles " onclick="switchView(1)" />
                        <input type="button" value=" list " onclick="switchView(2)" />
                        <input type="button" value=" map " onclick="switchView(3)" />          
                    </div>
                </td>
            </tr>
            <tr>
                <td style="vertical-align: top; padding-right: 10px; padding-top: 10px;">      
                    
                    <div id="map_canvas" style="width:200px; height:180px;"></div>
                    
                    <br>
                    
                    <table>
                        <tr>
                            <td colspan='2'>Property Types</td>
                        </tr>
                        <tr>
                            <td><input id="propertyType-2" type="checkbox" name="typecbx" value="2" onclick="check()" /></td>
                            <td>Condominium</td>
                        </tr>
                        <tr>
                            <td><input id="propertyType-3" type="checkbox" name="typecbx" value="3" onclick="check()" /></td>
                            <td>Apartment</td>
                        </tr>
                        <tr>
                            <td><input id="propertyType-4" type="checkbox" name="typecbx" value="4" onclick="check()" /></td>
                            <td>Townhouse</td>
                        </tr>
                        <tr>
                            <td><input id="propertyType-1" type="checkbox" name="typecbx" value="1" onclick="check()" /></td>
                            <td>House</td>
                        </tr>
                        <tr>
                            <td><input id="propertyType-5" type="checkbox" name="typecbx" value="5" onclick="check()" /></td>
                            <td>Room</td>
                        </tr>
                    </table>           
                                    
                    <hr>
                    
                    <table>
                        <tr>
                            <td colspan='2'>Property Status</td>
                        </tr>
                        <tr>
                            <td><input id="statusType-1" type="checkbox" name="statuscbx" value="1" onclick="check()" /></td>
                            <td>
                                For Sale               
                            </td>
                        </tr>
                        <tr>
                            <td><input id="statusType-2" type="checkbox" name="statuscbx" value="2" onclick="check()" /></td>
                            <td>
                                For Rent               
                            </td>
                        </tr>
                        <tr>
                            <td><input id="statusType-3" type="checkbox" name="statuscbx" value="3" onclick="check()" /></td>
                            <td>
                                Foreclosed               
                            </td>
                        </tr>
                    </table>                    
                           
                    <hr>
                    
                    <table>                        
                        <tr>
                            <td colspan='3'>Price Range</td>
                        </tr>
                        <tr>
                            <td><input type="text" name="monthRateLow" style="width:80px" value="${model.option.listingFilter.monthRateLow}" /></td>
                            <td>to</td>
                            <td><input type="text" name="monthRateHigh" style="width:80px" value="${model.option.listingFilter.monthRateHigh}" /></td>
                        </tr>
                    </table>
                    
                    <hr>
                    
                    <table>                        
                        <tr>
                            <td colspan='3'>Sq Area Range</td>
                        </tr>
                        <tr>
                            <td><input type="text" name="sqAreaLow" style="width:80px" value="${model.option.listingFilter.sqAreaLow}" /></td>
                            <td>to</td>
                            <td><input type="text" name="sqAreaHigh" style="width:80px" value="${model.option.listingFilter.sqAreaHigh}" /></td>
                        </tr>
                    </table>
                    
                    <hr>
                    
                    <table>                        
                        <tr>
                            <td colspan='3'>Bedrooms Range</td>
                        </tr>
                        <tr>
                            <td><input type="text" name="numBedroomsLow" style="width:80px" value="${model.option.listingFilter.numBedroomsLow}" /></td>
                            <td>to</td>
                            <td><input type="text" name="numBedroomsHigh" style="width:80px" value="${model.option.listingFilter.numBedroomsHigh}" /></td>
                        </tr>
                    </table>
                    
                    <hr>
                    
                    <table>                        
                        <tr>
                            <td colspan='3'>Bathrooms Range</td>
                        </tr>
                        <tr>
                            <td><input type="text" name="numBathroomsLow" style="width:80px" value="${model.option.listingFilter.numBathroomsLow}" /></td>
                            <td>to</td>
                            <td><input type="text" name="numBathroomsHigh" style="width:80px" value="${model.option.listingFilter.numBathroomsHigh}" /></td>
                        </tr>
                    </table>
                    
                    <hr>
                    
                    <table>
                        <tr>
                            <td colspan='2'>Amenities</td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" name="amenitycbx" value="cd340137-98df-4cb9-83d7-13941c6f40b3" onclick="check()" /></td>
                            <td>
                                Balcony               
                            </td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" name="amenitycbx" value="44b4cefa-8b9b-4c81-a17f-47c2dc262e8e" onclick="check()" /></td>
                            <td>
                                Gym               
                            </td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" name="amenitycbx" value="ae759784-bf62-4d46-8422-5f3915ed4006" onclick="check()" /></td>
                            <td>
                                Swimming Pool               
                            </td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" name="amenitycbx" value="ae535b19-170e-40d3-845e-383c9df3aff9" onclick="check()" /></td>
                            <td>
                                Function Rooms              
                            </td>
                        </tr>
                    </table>
                </td>
                <td style="border-left: 2px dashed gray; vertical-align: top;">     
                    
                    <div id="view-tiles" style="display:block; margin-top: -10px">                        
                        <div class="view-tile-outer">
                            <div id="view-tile-float-wrap" class="view-tile-float-wrap">                            
                                <c:forEach items="${model.listings}" var="listing">
                                <div class="view-tile-left-floater">
                                    <a href="listing.htm?a=2&id=${listing.id}">
                                        <img src="../uploads/img/${listing.primaryPhoto.filename}" alt="" style="height:130px; width:210px"></img>
                                    </a>  
                                    <br>
                                    <table border="0" style="width: 210px; padding-top:0px; ">
                                        <tr>
                                            <td>
                                                <span style="font-size: 12px; font-family: verdana">
                                                    ${listing.title}
                                                    <br><br>
                                                </span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><span style="font-size: 13px; font-weight: bold;">${listing.sqArea}</span>
                                                <span style="font-size: 12px;"> sqm.</span>
                                            </td>
                                            <td align="right">
                                                <span style="font-size: 13px; font-weight: bold;">&#8369;${listing.monthRate}</span>
                                                <span style="font-size: 12px;"> /mo.</span>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                </c:forEach>
                            </div>
                        </div>​
                    </div>
                    
                    <div id="view-list" style="display:none;">                         
                        <div id="view-list-outer" class="view-list-outer">                      
                            <c:forEach items="${model.listings}" var="listing">                                
                                <div style="background-color:#F5F2F3; width: 800px; margin-top: 10px; margin-left:10px;">
                                    <table>
                                        <tr>
                                            <td>
                                                <a href="listing.htm?a=2&id=${listing.id}">
                                                    <img src="../uploads/img/${listing.primaryPhoto.filename}" alt="" style="height:90px; width:160px"></img>
                                                </a>  
                                            </td>
                                            <td style="vertical-align: top;">
                                                <table border="0" style="width: 600px; padding-top:0px; margin-left: 5px;">
                                                    <tr>
                                                        <td>
                                                            <span style="font-size: 18px; font-family: verdana; padding-bottom: 10px">
                                                                ${listing.title}                                                
                                                            </span>
                                                            <div style="padding-top:5px; padding-bottom:0px;">
                                                                <span style="font-size: 12px; font-weight: normal;">${listing.address}</span>
                                                            </div>
                                                        </td>
                                                        <td align="right">                                                            
                                                            <span style="font-size: 25px; font-weight: normal;">&#8369;${listing.monthRate}</span>
                                                            <span style="font-size: 12px;"> /Mo.</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                        </td>
                                                        <td align="right">
                                                            <span style="font-size: 16px; font-weight: bold;">${listing.sqArea}</span>
                                                            <span style="font-size: 12px;"> sqm.</span>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </c:forEach>
                        </div>
                    </div>
                    
                    <div id="view-map" style="display:none;">                  
                        
                        <table style="margin-top:5px">
                            <tr>
                                <td>
                                    <div id="view-map-inner" style="width:800px; height:700px; margin-left: 15px"></div>
                                </td>
                                <!--
                                <td>
                                    <div style="max-height: 600px; overflow-y: scroll">
                                        <c:forEach items="${model.listings}" var="listing">                                
                                            <div style="background-color:#F5F2F3; width: 190px; margin-top: 10px; margin-left:15px; margin-right:15px;">
                                                <table>
                                                    <tr>
                                                        <td>
                                                            <a href="listing.htm?a=2&id=${listing.id}">
                                                                <img src="../uploads/img/${listing.primaryPhoto.filename}" alt="" style="height:100px; width:190px"></img>
                                                            </a>  
                                                            <table border="0" style="width: 190px; padding-top:0px">
                                                                <tr>
                                                                    <td>
                                                                        <span style="font-size: 12px; font-family: verdana">
                                                                            ${listing.title}
                                                                            <br><br>
                                                                        </span>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td><span style="font-size: 13px; font-weight: bold;">${listing.sqArea}</span>
                                                                        <span style="font-size: 12px;"> sqm.</span>
                                                                    </td>
                                                                    <td align="right">
                                                                        <span style="font-size: 13px; font-weight: bold;">&#8369;${listing.monthRate}</span>
                                                                        <span style="font-size: 12px;"> /mo.</span>
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </c:forEach>
                                    </div>
                                </td>
                                -->
                            </tr>
                        </table>
                        
                    </div>
                    
                    
                    <!--
                    <c:set var="ctr" value="0" />
                    
                    <table id="listings-table" border="0" cellpadding="10" cellspacing="10">
                        <c:forEach items="${model.listings}" var="listing">
                            <c:if test="${ctr % 4 == 0}">
                                <tr>
                                </c:if>

                                <td style="background-color:#F5F2F3 ">
                                    <a href="listing.htm?a=2&id=${listing.id}">
                                        <img src="../uploads/img/${listing.primaryPhoto.filename}" alt="" style="height:130px; width:210px"></img>
                                    </a>          
                                    
                                    <br>
                                    
                                    <table border="0" style="width: 210px; padding-top:8px">
                                        <tr>
                                            <td>
                                                <span style="font-size: 12px; font-family: verdana">
                                                    ${listing.title}
                                                    <br><br>
                                                </span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><span style="font-size: 13px; font-weight: bold;">${listing.sqArea}</span>
                                                <span style="font-size: 12px;"> sqm.</span>
                                            </td>
                                            <td align="right">
                                                <span style="font-size: 13px; font-weight: bold;">&#8369;${listing.monthRate}</span>
                                                <span style="font-size: 12px;"> /mo.</span>
                                            </td>
                                        </tr>
                                    </table>
                                    
                                </td>        

                                <c:set var="ctr" value="${ctr+1}" />

                                <c:if test="${5-ctr==1}">
                                </tr>                 
                                <c:set var="ctr" value="0" />
                                
                            </c:if>

                        </c:forEach>
                    </table>
                    -->
                    
                </td>
            </tr>
        </table>
                    
        <br><br>

        <br><br>

        <c:forEach items="${model.option.places}" var="place">
            <input type="hidden" name="placeID" value="${place.id}" />                        
        </c:forEach>
        <c:forEach items="${model.option.propertyTypes}" var="propertyType">
            <input type="hidden" name="propertyTypeID" value="${propertyType.id}" />                        
        </c:forEach>
        <c:forEach items="${model.option.statusTypes}" var="statusType">
            <input type="hidden" name="statusTypeID" value="${statusType.id}" />                        
        </c:forEach>
            
    </body>
</html>
